<template>
  <div>
    <h1>测试组件</h1>
    <swUploadImage
      v-model="list"
      :size="10"
      :crop="false"
      :specs-height-px="100"
      :specs-width-px="100"
      :multiple="false"
      :tip-format="tipFormat"
      :limit="5"
      :upload-data-format="uploadDataFormat"
      :upload-response-format="uploadResponseFormat"
      :draggable="true"
    >
    </swUploadImage>
    <hr />
    <SwUploadImage
      v-model="list"
      :size="10"
      :crop="false"
      :specs-height-px="100"
      :specs-width-px="100"
      :multiple="false"
      :upload-data-format="uploadDataFormat"
      :upload-response-format="uploadResponseFormat"
      :draggable="true"
    >
    </SwUploadImage>
  </div>
  <div>
    {{ list }}
  </div>
  <div>
    <img class="logo" v-for="item in list" :src="item.data.link" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import swUploadImage from '@/package/SwUploadImage/SwUploadImage.vue'
import { SwUploadImage } from 'sw-upload-image'
import { TipConfig, UploadDataItem } from './package/SwUploadImage/interface'
const list = ref<UploadDataItem[]>(
  new Array(5).fill('').map((_, i) => ({
    data: { path: '' },
    error: true,
    errMsg: `图片${i}`,
  }))
)
const tipFormat = (tipConfig: TipConfig) => {
  return `支持${tipConfig.accept}格式，最大${tipConfig.size}M，最多${tipConfig.limit}张`
}
const uploadDataFormat = (file: File) => {
  return {
    name: file.name,
    file: file,
  }
}
const uploadResponseFormat = (res: any) => {
  const _data = res.data.data
  return Object.assign(_data, { path: _data.name })
}
</script>

<style scoped>
.logo {
  height: 6em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
